<template>
  <div class="container">
    <div class="linear-gradient">
      <div class="content-wrapper">
        <div class="left-container">
          <div class="left-container-header">
            <el-form :model="searchFrom" label-width="auto">
              <el-form-item label="产线" style="display: flex; justify-content: space-between; align-items: center; width: 100%">
                <el-select v-model="searchFrom.productionLine" placeholder="请选择产线" style="width: 10vw; margin-right: auto">
                  <el-option v-for="item in searchFrom.productionLineOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" style="margin-left: auto" @click="onSubmit">查询</el-button>
              </el-form-item>
              <el-form-item label="卷号" style="width: 13.5vw">
                <el-input v-model="searchFrom.volumeNo" placeholder="请输入卷号" />
              </el-form-item>
              <el-form-item label="时间">
                <el-date-picker
                  v-model="dateRange"
                  type="datetimerange"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
              <!-- <el-form-item label="开始时间">
                <el-date-picker
                  v-model="searchFrom.startTime"
                  type="datetime"
                  placeholder="请选择开始时间"
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="YYYY-MM-DD h:m:s a"
                  :editable="false"
                />
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker
                  v-model="searchFrom.endTime"
                  type="datetime"
                  placeholder="请选择结束时间"
                  format="YYYY/MM/DD hh:mm:ss"
                  value-format="YYYY-MM-DD h:m:s a"
                  :editable="false"
                />
              </el-form-item> -->
            </el-form>
          </div>
          <div class="left-container-table">
            <el-table :data="leftTableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" max-height="580px">
              <el-table-column prop="serialNumber" label="序号">
                <template #default="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="exitVolumeNo" label="出口卷号" />
              <el-table-column prop="CompletionTime" label="生产完成时间" />
            </el-table>
          </div>
          <div class="left-container-footer">
            <el-pagination
              v-model:current-page="pagination.currentPage"
              v-model:page-size="pagination.pageSize"
              :page-sizes="[10, 20, 30, 50]"
              :total="pagination.total"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <div class="right-container">
          <el-tabs v-model="activeName" class="right-tabs" @tab-click="tabClick">
            <el-tab-pane label="冷轧PDI" name="coldRollingPDI" class="tab1">
              <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="tab1-table">
                <el-table-column prop="serialNumber" label="序号">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="variableName" label="变量名[中文]" />
                <el-table-column sortable prop="variableCode" label="变量名" />
                <el-table-column prop="variableValue" label="值" />
              </el-table>
              <div class="tab1-pagination">
                <el-pagination
                  v-model:current-page="pagination.currentPage"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="冷轧PDO" name="coldRollingPDO" class="tab1">
              <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="tab1-table">
                <el-table-column prop="serialNumber" label="序号">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="variableName" label="变量名[中文]" />
                <el-table-column sortable prop="variableCode" label="变量名" />
                <el-table-column prop="variableValue" label="值" />
              </el-table>
              <div class="tab1-pagination">
                <el-pagination
                  v-model:current-page="pagination.currentPage"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="冷轧特征值" name="coldRollingEigenvalue" class="tab1">
              <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="tab1-table">
                <el-table-column prop="serialNumber" label="序号">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="variableName" label="变量名[中文]" />
                <el-table-column sortable prop="variableCode" label="变量名" />
                <el-table-column prop="variableValue" label="值" />
              </el-table>
              <div class="tab1-pagination">
                <el-pagination
                  v-model:current-page="pagination.currentPage"
                  v-model:page-size="pagination.pageSize"
                  :page-sizes="[10, 20, 30, 50]"
                  :total="pagination.total"
                  layout="total, sizes, prev, pager, next"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="冷轧曲线" name="coldRollingGraph" class="tab4">
              <div class="tab4-table">
                <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" height="100%">
                  <el-table-column sortable prop="variableName" label="变量名[中文]" />
                  <el-table-column sortable prop="variableCode" label="变量名" />
                  <el-table-column label="操作">
                    <template #header>
                      <el-input v-model="tab4VariableSearch" placeholder="输入关键字" @change="onTab4InputChange" />
                    </template>
                    <template #default="scope">
                      <el-button type="warning" @click="onSearchGraph(scope.row)">查询</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="tab4-graph">
                <div class="tab4-graph-top">
                  <graph-draw v-if="activeName === 'coldRollingGraph'" :key="'coldTop' + graphRenderKey" :act-data="actCpcArray" :xdata="xdata" :series-name="topGraphName" ref="coldGraphDrawTop" />
                </div>
                <div class="tab4-graph-buttom">
                  <graph-draw v-if="activeName === 'coldRollingGraph'" :key="'coldBottom' + graphRenderKey" :act-data="actCpcArray" :xdata="xdata" :series-name="bottomGraphName" ref="coldGraphDrawBottom" />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="热轧PDI" name="hotRollingPDI" class="tab1">
              <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="tab1-table">
                <el-table-column prop="serialNumber" label="序号">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="variableName" label="变量名[中文]" />
                <el-table-column sortable prop="variableCode" label="变量名" />
                <el-table-column prop="variableValue" label="值" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="热轧PDO" name="hotRollingPDO" class="tab1">
              <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="tab1-table">
                <el-table-column prop="serialNumber" label="序号">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="variableName" label="变量名[中文]" />
                <el-table-column sortable prop="variableCode" label="变量名" />
                <el-table-column prop="variableValue" label="值" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="热轧特征值" name="hotRollingEigenvalue" class="tab1">
              <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="tab1-table">
                <el-table-column prop="serialNumber" label="序号">
                  <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable prop="variableName" label="变量名[中文]" />
                <el-table-column sortable prop="variableCode" label="变量名" />
                <el-table-column prop="variableValue" label="值" />
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="热轧曲线" name="hotRollingGraph" class="tab4">
              <div class="tab4-table">
                <el-table :data="tab1TableData" style="width: 100%" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" height="100%">
                  <el-table-column sortable prop="variableName" label="变量名[中文]" />
                  <el-table-column sortable prop="variableCode" label="变量名" />
                  <el-table-column label="操作">
                    <template #header>
                      <el-input v-model="tab4VariableSearch" placeholder="输入关键字" @change="onTab4InputChange" />
                    </template>
                    <template #default="scope">
                      <el-button type="warning" @click="onSearchGraph(scope.row)">查询</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="tab4-graph">
                <div class="tab4-graph-top">
                  <graph-draw v-if="activeName === 'hotRollingGraph'" :key="'hotTop' + graphRenderKey" :act-data="actCpcArray" :xdata="xdata" :series-name="topGraphName" ref="hotGraphDrawTop" />
                </div>
                <div class="tab4-graph-buttom">
                  <graph-draw v-if="activeName === 'hotRollingGraph'" :key="'hotBottom' + graphRenderKey" :act-data="actCpcArray" :xdata="xdata" :series-name="bottomGraphName" ref="hotGraphDrawBottom" />
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { ref, reactive, computed, onMounted, onUnmounted, nextTick, defineComponent, watch } from 'vue';
  import type { TabsPaneContext } from 'element-plus';
  // import GraphCard from '/@/components/CpcWidth/GraphCard.vue';
  import GraphDraw from '/@/components/GraphDraw/GraphDraw.vue';

  // Define interface for GraphDraw component instance if possible, otherwise use any
  interface GraphDrawInstance {
    updateChart: () => void;
    // Add other methods/properties if needed
  }

  export default defineComponent({
    components: {
      GraphDraw,
    },
    setup() {
      const leftTableData = ref([
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
        { exitVolumeNo: '123456789', CompletionTime: '2022-01-01 12:00:00' },
      ]);

      const tab1TableData = ref([
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Cu', variableValue: '1' },
        { variableName: '铜', variableCode: 'Ca', variableValue: '1' },
      ]);

      const tab4VariableSearch = ref('');
      const dateRange = ref(['', '']);
      const graphDraw = ref<InstanceType<typeof GraphDraw>>();

      const activeName = ref('coldRollingPDI');

      const actCpcArray = ref<number[]>([1000, 1001, 1002, 1003, 1004, 1005, 1004, 1003, 1002, 1001]);
      const xdata = ref<string[]>(['100', '200', '300', '400', '500', '600', '700', '800', '900', '1000']);
      const setCpc = ref<number>(); // 不显示上下限
      const setCpc2 = ref<number>(); // 不显示上下限

      const handleClick = (tab: TabsPaneContext, event: Event) => {
        console.log(tab, event);
      };

      const onSearchGraph = (row: any) => {
        console.log(row);
      };

      const pagination = reactive({
        currentPage: 1,
        pageSize: 10,
        total: leftTableData.value.length,
      });

      const handleSizeChange = (val: number) => {
        pagination.pageSize = val;
        // 这里可以添加获取新数据的逻辑
      };

      const onTab4InputChange = () => {
        console.log(tab4VariableSearch.value);
      };

      const handleCurrentChange = (val: number) => {
        pagination.currentPage = val;
        // 这里可以添加获取新数据的逻辑
      };

      const searchFrom = reactive({
        productionLine: '',
        volumeNo: '',
        startTime: '',
        endTime: '',
        productionLineOptions: [
          {
            value: '2280酸轧',
            label: '2280酸轧',
          },
          {
            value: '2150连退',
            label: '2150连退',
          },
          {
            value: '1630连退',
            label: '1630连退',
          },
          {
            value: '1870镀锌',
            label: '1870镀锌',
          },
          {
            value: '2150重卷',
            label: '2150重卷',
          },
          {
            value: '1630重卷',
            label: '1630重卷',
          },
          {
            value: '1870重卷',
            label: '1870重卷',
          },
        ],
      });
      const onSubmit = () => {
        console.log('submit!');
      };

      const coldGraphDrawTop = ref<GraphDrawInstance | null>(null);
      const coldGraphDrawBottom = ref<GraphDrawInstance | null>(null);
      const hotGraphDrawTop = ref<GraphDrawInstance | null>(null);
      const hotGraphDrawBottom = ref<GraphDrawInstance | null>(null);

      const tabClick = (tab: TabsPaneContext) => {
        const paneName = tab.props.name;
        if (paneName === 'coldRollingGraph' || paneName === 'hotRollingGraph') {
          nextTick(() => {
            // Use a slightly longer delay after nextTick for layout finalization
            setTimeout(() => {
              try {
                console.log(`Tab switched to ${paneName}, attempting to update charts.`);
                if (paneName === 'coldRollingGraph') {
                  // Ensure refs exist before calling updateChart
                  if (coldGraphDrawTop.value) {
                     coldGraphDrawTop.value.updateChart();
                     console.log('Updated coldGraphDrawTop');
                  } else {
                     console.warn('coldGraphDrawTop ref not available');
                  }
                  if (coldGraphDrawBottom.value) {
                     coldGraphDrawBottom.value.updateChart();
                     console.log('Updated coldGraphDrawBottom');
                  } else {
                     console.warn('coldGraphDrawBottom ref not available');
                  }
                } else if (paneName === 'hotRollingGraph') {
                   // Ensure refs exist before calling updateChart
                  if (hotGraphDrawTop.value) {
                     hotGraphDrawTop.value.updateChart();
                     console.log('Updated hotGraphDrawTop');
                  } else {
                     console.warn('hotGraphDrawTop ref not available');
                  }
                  if (hotGraphDrawBottom.value) {
                     hotGraphDrawBottom.value.updateChart();
                     console.log('Updated hotGraphDrawBottom');
                  } else {
                     console.warn('hotGraphDrawBottom ref not available');
                  }
                }
              } catch (error) {
                console.error(`Error updating chart in tab ${paneName} on tabClick:`, error);
              }
            }, 150); // Increased delay (adjust if needed)
          });
        }
      };

      const topGraphName = ref('图表1');
      const bottomGraphName = ref('图表2');

      const graphRenderKey = ref(0);

      watch(activeName, (newName) => {
        if (newName === 'coldRollingGraph' || newName === 'hotRollingGraph') {
          nextTick(() => {
            // 尝试强制重新渲染 + 更新
            graphRenderKey.value += 1; // 改变 key 来强制重新渲染
            setTimeout(() => { // 仍然保留 setTimeout
              try {
                if (newName === 'coldRollingGraph') {
                  coldGraphDrawTop.value?.updateChart();
                  coldGraphDrawBottom.value?.updateChart();
                } else if (newName === 'hotRollingGraph') {
                  hotGraphDrawTop.value?.updateChart();
                  hotGraphDrawBottom.value?.updateChart();
                }
              } catch (error) {
                console.error('Error updating chart after key change:', error);
              }
            }, 50);
          });
        }
      });

      return {
        searchFrom,
        onSubmit,
        leftTableData,
        tab1TableData,
        pagination,
        handleSizeChange,
        handleCurrentChange,
        activeName,
        handleClick,
        tab4VariableSearch,
        onTab4InputChange,
        actCpcArray,
        xdata,
        setCpc,
        setCpc2,
        topGraphName,
        bottomGraphName,
        onSearchGraph,
        tabClick,
        graphDraw,
        dateRange,
        coldGraphDrawTop,
        coldGraphDrawBottom,
        hotGraphDrawTop,
        hotGraphDrawBottom,
        graphRenderKey,
      };
    },
  });
</script>
<style scoped lang="less">
  .container {
    width: 100vw;
    height: 100vh;

    .linear-gradient {
      width: 100%;
      height: 100%;
      position: relative;
      background-image: linear-gradient(to top, white, #2c69e8);
    }

    .content-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
    }

    .left-container {
      width: 30%;
      height: 100%;
      margin-right: 20px;
      background-color: white;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      gap: 20px;
      justify-content: space-between;

      .left-container-header {
        width: 100%;
        height: 20%;
      }

      .left-container-table {
        width: 100%;
        height: 70%;
        overflow: hidden;
        margin-top: 1vh;
        border: 1px solid #ebeef5;
        border-radius: 4px;
      }
      .left-container-footer {
        margin-top: 3vh;
        display: flex;
        justify-content: flex-end;
      }
    }

    .right-container {
      flex: 1;
      height: 100%;
      background-color: white;
      border-radius: 4px;
      padding: 20px;
      box-sizing: border-box;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .right-tabs {
        width: 100%;
        height: 100%;

        .tab1 {
          height: 100%;
          width: 100%;

          .tab1-table {
            height: 92%;
            width: 100%;
            border: 1px solid #ebeef5;
            border-radius: 4px;
          }

          .tab1-pagination {
            margin-top: 3vh;
            display: flex;
            justify-content: flex-end;
          }
        }

        .tab4 {
          height: 100%;
          width: 100%;
          display: flex;
          gap: 20px;

          .tab4-table {
            height: 100%;
            width: 30%;
            border: 1px solid #ebeef5;
            border-radius: 4px;
          }

          .tab4-graph {
            height: 100%;
            width: calc(70% - 20px);
            border: 1px solid #ebeef5;
            border-radius: 4px;

            .tab4-graph-top {
              width: 100%;
              height: calc(50% - 20px);
              border: 1px solid #ebeef5;
              border-radius: 4px;
              margin-top: 15px;

              .graph {
                height: 80%;
                width: 90%;
              }
            }

            .tab4-graph-buttom {
              width: 100%;
              height: calc(50% - 20px);
              border: 1px solid #ebeef5;
              border-radius: 4px;
              margin-top: 20px;
            }
          }
        }

        .el-tabs__content {
          padding: 32px;
          color: #6b778c;
        }
      }
    }
  }
</style>
